<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/bootstrap-3.4.1-dist/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/dcalendar.picker.css"/>
    <style>

        .navbar-default .navbar-brand {
            color: #fff;
            font-size: 30px;
            padding-left: 30px

        }

        .navbar-default .navbar-text {
            margin-top: 15px;
            color: #fff;
        }

        .navbar-text {
            color: #fff;
            font-size: 15px
        }

        .nav nav-tabs {
            background-color: #003b95;
        }

        .content-sec3 {
            position: relative;
            max-width: 100%;
            height: auto;
            background: url('../static/img/headerpic.jpeg') no-repeat top center;
            background-size: 100% auto;
            background-color: cadetblue;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        .titleImg {
            width: 200px;
            height: 200px;
            object-fit: cover;
            flex: 1;
        }

        /* Navigation bar */
        .navbar-default {
            background-color: #003B95;
            border-color: #003B95;
            color: #fff;
            font-size: 16px;
        }

        .navbar-default .navbar-brand {
            color: #fff;
            font-size: 30px;
            padding-left: 30px;
        }

        .navbar-default .navbar-text,
        .navbar-default .navbar-nav > li > a {
            color: #fff;
            font-size: 16px;
            font-weight: 500;
        }

        .navbar-default .navbar-text {
            margin-top: 15px;
        }

        /* Breadcrumb */
        .breadcrumb {
            background-color: #fff;
            margin-bottom: 10px;
            padding: 8px 15px;
            border-radius: 4px;
        }

        .breadcrumb > li + li:before {
            content: ">";
            padding: 0 5px;
            color: #ccc;
        }

        /* Left column */
        #left {
            width: 25%;
            padding: 0 15px;
            float: left;
        }

        .leftsmall {
            font-size: 14px;
        }

        .leftsmall > div {
            padding: 10px 0;
        }

        .leftsmall .input-group {
            margin-bottom: 10px;
        }

        .leftsmall .input-group-addon {
            background-color: #fff;
            border: none;
        }

        .leftsmall .form-control {
            border-radius: 0;
        }

        .leftsmall .btn-primary {
            background-color: #003B95;
            border-color: #003B95;
            width: 100%;
            border-radius: 0;
            font-size: 16px;
        }

        .leftsmall .btn-primary:hover {
            background-color: #428BCA;
            border-color: #428BCA;
        }

        /* Right column */
        #right {
            width: 75%;
            padding: 0 15px;
            float: right;
        }

        .maps-overlay {
            position: relative;
            height: 100%;
            background: #F9F9F9;
            border: 1px solid #E5E5E5;
        }

        border {
            border-style: solid;
            border-width: medium;
        }


        /*借用的部分的style*/
        .score_blue_pattern {
            display: inline-block;
            border-radius: 5px 5px 5px 0;
            height: 24px;
            min-width: 24px;
            width: 24px;
            align-items: center;
            background: #003580;
            color: #fff;
            justify-content: center;
            vertical-align: center;
            text-align: center;
            font-size: small;
            line-height: 25px
        }

        .small_facs {
            display: inline-block;
            padding-right: 6px;
        }

        .little_icon {
            display: inline-block;
            height: 16px;
            width: 16px;
            vertical-align: -3px;
        }

        .little_font {
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
        }

        .small_facs {
            display: inline-block;
            padding-right: 6px;
        }


        /*以下是欢迎预定下拉框涉及的css样式*/
        .dropdown{
            position: relative;
            display: inline-block;
        }
        .dropbtn{
            background-color: #003B95;
            color: white;
            font-size: 16px;
            padding: 16px;
            border: none;
            cursor: pointer;
        }
        .dropdown-content{
            display: none;
            position: absolute;
            background-color: white;
            width: 100%;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .dropdown-content a{
            color: black;
            padding: 12px 16px;
            text-decoration:  none;
            display: block;
        }
        .dropdown-content a:hover{
            background-color: #b9def0;
        }
        .dropdown:hover .dropdown-content{
            display: block;
        }
        .dropdown:hover .dropbtn{
            background-color: #003B95;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" style="background-color: #003b95   ">

    <div class="container-fluid ">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="container">
                <a class="navbar-brand " href="https://www.booking.cn">Booking.com</a>
            </div>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><p class="navbar-text ">上线我的住宿</p></li>
                <!--li><a href="/login" style="color:#fff">登录</a></li-->
                <!--以下li是下拉框的组件html-->
                <li><div class="dropdown">
                    <button class="dropbtn">欢迎预定！</button>
                    <div class="dropdown-content">
                        <a href="/order?order=null">查看订单 </a>
                        <a href="/logout">退出 </a>
                    </div>
                </div></li>

                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--空白框子界面-->
<!--需要修改成动态的-->
<div id="displayBox" class="span12" style="margin-left: 40px;margin-right: 40px;margin-top: 20px">


</div>
<!--蓝色条条-->
<div style="height: 40px;width:100%;background-color: #003b95;text-align: center;margin-top: 20px">


    <div style="width:140px;border:solid 1px white;color:white;border-radius: 5px;text-align: center;margin: 10px;display:inline-block;">
        <a style="color:white" href=#>上线我的住宿</a></div>

    <hr style="color: white">

</div>

<div style="border:solid 2px black"></div>

<div class="footerconstraint-inner container" style="margin-top: 10px">
    <div id="footer" class="footer-navigation-links-wrapper clearfix" role="navigation">
        <div id="footer_links" class="footer-navigation-links">
            <div class="footer-navigation-links-column footer-seo-links-to-html-sitemaps">
                <ul class="footer-navigation-links-list col-xs-6 col-md-2">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/country.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            国家/地区
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/region.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            区域
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/city.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            城市
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/district.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            区
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/airport.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            机场
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/hotel/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            酒店
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/landmark.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="seoindexlinks">
                            周边地标/景点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list footer-seo-links-to-index col-xs-6 col-md-2">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/booking-home/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="booking-home">
                            民宿短租
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/apartments/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="apartments">
                            公寓
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/resorts/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="resorts">
                            度假村
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/villas/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="villas">
                            别墅
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/hostels/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="hostels">
                            青旅
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/bed-and-breakfast/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="bed_and_breakfast">
                            住宿加早餐旅馆
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/guest-house/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="guest_house">
                            旅馆
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list col-xs-6 col-md-3">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/accommodations.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="accommodations">
                            全球独特住宿
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/destination.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="destinations">
                            所有目的地
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/flights/sitemap.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="flights_destinations">
                            所有航班目的地
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/cars/sitemap.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="cars_destinations">
                            所有租车点
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="/discover.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            发现精彩
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/reviews
.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc
" data-ga="seoindexlinks" class="js-reviews-footer-link">
                            客人点评
                        </a>
                    </li>
                    <div data-et-view="  BHDTJdReLLCBLZBeMbFMOFIbeDUHYKe:1 BHDTJdReLLCBLZBeMbFMOFIbeDUHYKe:3 "></div>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/extended-stays/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           data-ga="extended-stays">
                            探索月租
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://booking.cn/articles.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           type="nav" location="main-site-footer" category="articles-link">
                            游记攻略
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/deals/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc"
                           title="季节和假日优惠">
                            季节和假日优惠
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/traveller-awards/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            Traveller Review Awards
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list col-xs-6 col-md-2">
                    <li class="footer-navigation-link">
                        <a rel="nofollow"
                           href="http://cars.booking.com/Home.do?affiliateCode=booking-com&amp;adplat=footer&amp;preflang=zh-cn"
                           target="_blank"
                           data-google-track="Click/Rental cars footer link click (loy_footer_rentalcars_copy: 0)/index"
                           data-ga-track="click|pageview:/outgoinglink/traveljigsaw/zh">
                            租车服务
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a rel="nofollow"
                           href="https://booking.cn/pxgo?url=https%3A%2F%2Fbooking.kayak.com%2Fin%3Fa%3Dbdc%252Ffooter_link%26p%3Dfooter_link%26sid%3D1c3c74b8ebf43b98ff7f33d85a5ffadc%26mc%3DCNY%26bdclc%3Dzh-cn&amp;token=UmFuZG9tSVYkc2RlIyh9Yb5s-oRzgw76bcWUd8wbcu_HQ_oNS0n5o7zQ4ALMS4xCAz2HhcKhGLwnccOLYQQwIxoA1l8Dn-u7SWMJSrnvF2SlZw8LSyUylQlCcuex9gosnb-4lO3cBh4k55cNqRMSfFPLFXGPgVPZeOUwZXy7_R3yPHWDyJSfMAqwMnH4WY9TRhY0s8ADXBtGbDLIS0T-KtRtFttcYhtDXbuQ7ipS0tb--gvkbygnAE6CDsonH1jwNNquYwxgt-fAFY4IzjwKRYif4ihrj-bn70oWjdeHkcdSByHc3aIq9e3pHTCqMCCtVtwVI2LSsPyn_XU17hLXAA&amp;aid=1633942&amp;lang=zh"
                           target="_blank" data-google-track="Click/Kayak footer link/index"
                           data-ga-track="click|pageview:/outgoinglink/kayaklink">
                            订机票
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a rel="nofollow" href="http://www.opentable.com?ref=16087" target="_blank"
                           data-google-track="Click/Opentable footer link/index"
                           data-ga-track="click|pageview:/outgoinglink/opentablelink">
                            餐厅订位
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="
https://booking.cn/affiliate-program/v2/index.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc&amp;utm_medium=referral&amp;utm_campaign=booking-footer&amp;utm_content=travel-agents-link&amp;utm_source=booking.com
" title="Booking.com for Travel Advisers"
                           data-ga-track="click|pageview:/internallink/partner/footer/adviserslink/index/zh-cn">
                            Booking.com缤客旅行代理机构中心
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-navigation-links-column">
                <ul class="footer-navigation-links-list col-xs-6 col-md-3">
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/covid-19-booking-faqs.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            新冠肺炎（COVID-19）疫情常见问题及解答
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/about.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">关于Booking.com缤客</a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="/content/contact-us.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">联系我们</a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="/content/business-license.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">营业执照</a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://secure.booking.cn/help.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc&amp;source=footer_navigation#/?source=footer_navigation"
                           data-ga-track="click|Click|Action: index|hc_entrypoint_footer_navigation">
                            客服帮助
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://partner.booking.com/en-gb?utm_campaign=footer_list&amp;utm_medium=frontend_footer&amp;utm_source=booking.com">
                            酒店自助平台
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://careers.booking.com/?utm_source=corporate&amp;utm_medium=footer"
                           data-ga-track="click|pageview:/outgoinglink/footer/careerlink/zh-cn">
                            Careers
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://sustainability.booking.com/"
                           data-ga-track="click|pageview:/outgoinglink/footer/sustainabilitylink/zh-cn">
                            可持续发展项目
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a class="tracked" data-google-track="Click/Action: about_us/press"
                           href="https://news.booking.com/zh-chs/">
                            新闻中心
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/trust-and-safety.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc&amp;utm_source=footer_menu&amp;utm_medium=web_frontend"
                           class="tracked">
                            安全旅行信息中心
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a class="tracked" data-google-track="Click/Action: about_us/investor_relations"
                           href="https://www.bookingholdings.com/">
                            投资者关系
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/terms.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            条款与条件
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://secure.booking.cn/content/complaints.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            合作伙伴申诉
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/how_we_work.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            我们如何运作
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.booking.cn/content/privacy.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            隐私和Cookie声明
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <div style="display:none">
                            <button id="ot-sdk-btn" class="ot-sdk-show-settings">点此</button>
                        </div>
                        <a href="#" class=" ot-preference-center-footer">
                            管理Cookie设置
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="https://www.bookingholdings.com/about/compliance-and-ethics/">
                            MSA声明
                        </a>
                    </li>
                    <li class="footer-navigation-link" data-ga-track="click|CSIR|CS|footer_link_contact_us">
                        <a href="https://www.booking.cn/content/contact-us.zh-cn.html?aid=1633942&amp;label=baidu-brand-list1&amp;sid=1c3c74b8ebf43b98ff7f33d85a5ffadc">
                            其他问题查询
                        </a>
                    </li>
                    <li class="footer-navigation-link">
                        <a href="#" title="
最优惠价格保证 - 核实后将予以差价补偿！
" class="
jq_tooltip
open-bpg-in-overlay-instead
">价格更放心</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="../static/js/jquery-3.6.4.min.js"></script>
<script src="../static/bootstrap-3.4.1-dist/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/dcalendar.picker.js"></script>
<script type="text/javascript">
    $('#mydatepicker').dcalendarpicker();
    $('#mydatepicker1').dcalendarpicker();
</script>
<script type="text/javascript">
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
</script>
<script type="text/javascript">
    var json2={{result|tojson}}
    //json = [{"room_name": "aaa","bed_type":"aaa","hname":"aaa","checkin":"aaa","checkout":"aaa","room_price":"aaa"}]
   // var json=[]
    window.onload = function () {
        //载入展示内容
        if (json2.length == 0) {
            var tbody = document.querySelector("#displayBox")
            var tr = document.createElement("tr");
            tr.innerHTML = ` <div style="border:1px solid #AAAAAA ; border-radius: 5px;margin: 40px;width:160%;height:600px;text-align: center">


 <div style="text-align: center"> <div style="margin-top:100px;"><img   width="256" height="256" src="../static/img/null.png" /></div>
<div style="font-weight:bold;font-size:25px">个人行程将在此显示</div>
<div style="margin:20px ;font-size:10px">本页将显示您的所有订单。如果您有订单，但本页没有显示，可使用订单确认号和PIN码导入订单。</div>
<a href=# style="color: #007bff">导入订单</a></div>
</div>
  `
            tbody.appendChild(tr);
        } else {
            var tbody = document.querySelector("#displayBox")
            tbody.innerHTML = `   <div class="col-lg-12">
   <div style="margin-left: 10%;margin-right: 10% ;margin-bottom:20px">
   <h1>订单和行程</h1>
   <a href="#" style="color: #007bff;float: right;padding-bottom: 200px">无法找到一项预定?</a>
   </div>
<div class="container">
<div  style="margin-top: 20px;margin-bottom:20px;padding:20px;max-width: 100%;height: 200px; background: url('../static/img/headerpic.jpeg') ;
    background-size: 100% auto ;opacity: 0.6 ">

</div>
</div>

</div>
`

            json2.forEach(function (item, i) {

                if (i < json2.length) {
                    var tr = document.createElement("tr");
                    tr.innerHTML = `
<div class="container" style="margin: 10px">

 <div class="col-lg-12 container" style="margin-left:11%;border: #9d9d9d;box-shadow: 0 0 10px #80A7DD">
  <div style="" class="row-fluid">

<div class="col-lg-2">
<img width="140" height="140" style="margin-top: 20px;margin-bottom: 20px" src="${item.img}" />
</div>

<div class="col-lg-6" style="margin-left: 10px">
<h3>${item.hotelname}</h3>

<p>${item.checkin}-${item.checkout}</p>
<p>${item.roomname}-${item.bedtype}:${item.room_num}间</p>
<p style="color:green">已确认</p>

</div>

<div class="col-lg-2" style="margin-top: 10px;float: right">
<!--价格由后端传递-->
<h3 style="float: right">${item.price}元</h3>

  <a href="/order?oid=${item.oid}"  onclick="td()"> <input  style="margin-bottom:10px;width:100px;float: right" type="button" name="${item.oid}" value="退订" ></a>
</div>

  </div>
 </div>
</div>
            `


                    //展示的信息计划 ：酒店信息一系列（图片，地址，评分等），入住时间，退房时间，价格，为他人预定/自己，含不含早餐，预计到店时间
                    tbody.appendChild(tr);
                }
            })
        }


    }

function td()
{
alert("您的该订单已成功退订！")
}

</script>

</body>
</html>
